<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Material Design Bootstrap</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="css/all.css">
  <!-- Bootstrap core CSS -->
 <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
  <!-- Material Design Bootstrap -->
  <link href="css/mdb.min.css" rel="stylesheet">
  <!-- Your custom styles (optional) -->
  <link href="css/style.min.css" rel="stylesheet">
  <style type="text/css">
html,  body,  header,  .view {
    height: 100%;
}

@media (max-width: 740px) {
html,  body,  header,  .view {
    height: 1000px;
}
}

@media (min-width: 800px) and (max-width: 850px) {
html,  body,  header,  .view {
    height: 650px;
}
}

@media (min-width: 800px) and (max-width: 850px) {
.navbar:not(.top-nav-collapse) {
    background: #1C2331!important;
}
}
</style>
  </head>

  <body>

<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar">
    <div class="container"> 
    
    <!-- Brand --> 
    <a class="navbar-brand" href="#" > <strong>MDB</strong> </a> 
    
    <!-- Collapse -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
        aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    
    <!-- Links -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
        
        <!-- Left -->
        <ul class="navbar-nav mr-auto">
        <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span> </a> </li>
        <li class="nav-item"> <a class="nav-link" href="#" >About MDB</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#getting-started/download/" >Free download</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#" >Free tutorials</a> </li>
      </ul>
        
        <!-- Right -->
        <ul class="navbar-nav nav-flex-icons">
        <li class="nav-item"> <a href="#" class="nav-link" > <i class="fab fa-facebook-f"></i> </a> </li>
        <li class="nav-item"> <a href="#" class="nav-link" > <i class="fab fa-twitter"></i> </a> </li>
        <li class="nav-item"> <a href="#" class="nav-link border border-light rounded">MDB GitHub </a> </li>
      </ul>
      </div>
  </div>
  </nav>
<!-- Navbar --> 

<!-- Full Page Intro -->
<div class="view full-page-intro" style="background-image: url('https://picsum.photos/id/122/1920/1080'); background-repeat: no-repeat; background-size: cover;"> 
    
    <!-- Mask & flexbox options-->
    <div class="mask rgba-black-light d-flex justify-content-center align-items-center"> 
    
    <!-- Content -->
    <div class="container"> 
        
        <!--Grid row-->
        <div class="row wow fadeIn"> 
        
        <!--Grid column-->
        <div class="col-md-6 mb-4 white-text text-center text-md-left">
            <h1 class="display-4 font-weight-bold">Learn Bootstrap 4 with MDB</h1>
            <hr class="hr-light">
            <p> <strong>Best & free guide of responsive web design</strong> </p>
            <p class="mb-4 d-none d-md-block"> <strong>The most comprehensive tutorial for the Bootstrap 4. Loved by over 500 000 users. Video and written versions
              available. Create your own, stunning website.</strong> </p>
            <a  href="#" class="btn btn-indigo btn-lg">Start free tutorial <i class="fas fa-graduation-cap ml-2"></i> </a> </div>
        <!--Grid column--> 
        
        <!--Grid column-->
        <div class="col-md-6 col-xl-5 mb-4"> 
            
            <!--Card-->
            <div class="card"> 
            
            <!--Card content-->
            <div class="card-body"> 
                
                <!-- Form -->
                <form name="">
                <!-- Heading -->
                <h3 class="dark-grey-text text-center"> <strong>Write to us:</strong> </h3>
                <hr>
                <div class="md-form"> <i class="fas fa-user prefix grey-text"></i>
                    <input type="text" id="form3" class="form-control">
                    <label for="form3">Your name</label>
                  </div>
                <div class="md-form"> <i class="fas fa-envelope prefix grey-text"></i>
                    <input type="text" id="form2" class="form-control">
                    <label for="form2">Your email</label>
                  </div>
                <div class="md-form"> <i class="fas fa-pencil-alt prefix grey-text"></i>
                    <textarea type="text" id="form8" class="md-textarea"></textarea>
                    <label for="form8">Your message</label>
                  </div>
                <div class="text-center">
                    <button class="btn btn-indigo">Send</button>
                    <hr>
                    <fieldset class="form-check">
                    <input type="checkbox" class="form-check-input" id="checkbox1">
                    <label for="checkbox1" class="form-check-label dark-grey-text">Subscribe me to the newsletter</label>
                  </fieldset>
                  </div>
              </form>
                <!-- Form --> 
                
              </div>
          </div>
            <!--/.Card--> 
            
          </div>
        <!--Grid column--> 
        
      </div>
        <!--Grid row--> 
        
      </div>
    <!-- Content --> 
    
  </div>
    <!-- Mask & flexbox options--> 
    
  </div>
<!-- Full Page Intro --> 

<!--Main layout-->
<main>
    <div class="container"> 
    
    <!--Section: Main info-->
    <section class="mt-5 wow fadeIn"> 
        
        <!--Grid row-->
        <div class="row"> 
        
        <!--Grid column-->
        <div class="col-md-6 mb-4"> <img src="https://mdbootstrap.com/img/Marketing/mdb-press-pack/mdb-main.jpg" class="img-fluid z-depth-1-half" alt=""> </div>
        <!--Grid column--> 
        
        <!--Grid column-->
        <div class="col-md-6 mb-4"> 
            
            <!-- Main heading -->
            <h3 class="h3 mb-3">Material Design for Bootstrap</h3>
            <p>This template is created with Material Design for Bootstrap ( <strong>MDB</strong> ) framework.</p>
            <p>Read details below to learn more about MDB.</p>
            <!-- Main heading -->
            
            <hr>
            <p> <strong>400+</strong> material UI elements, <strong>600+</strong> material icons, <strong>74</strong> CSS animations, SASS files, templates, tutorials and many more. <strong>Free for personal and commercial use.</strong> </p>
            
            <!-- CTA --> 
            <a  href="#getting-started/download/" class="btn btn-indigo btn-md">Download <i class="fas fa-download ml-1"></i> </a> <a  href="#components/" class="btn btn-indigo btn-md">Live demo <i class="far fa-image ml-1"></i> </a> </div>
        <!--Grid column--> 
        
      </div>
        <!--Grid row--> 
        
      </section>
    <!--Section: Main info-->
    
    <hr class="my-5">
    
    <!--Section: Main features & Quick Start-->
    <section>
        <h3 class="h3 text-center mb-5">About MDB</h3>
        
        <!--Grid row-->
        <div class="row wow fadeIn"> 
        
        <!--Grid column-->
        <div class="col-lg-6 col-md-12 px-4"> 
            
            <!--First row-->
            <div class="row">
            <div class="col-1 mr-3"> <i class="fas fa-code fa-2x indigo-text"></i> </div>
            <div class="col-10">
                <h5 class="feature-title">Bootstrap 4</h5>
                <p class="grey-text">Thanks to MDB you can take advantage of all feature of newest Bootstrap 4.</p>
              </div>
          </div>
            <!--/First row-->
            
            <div style="height:30px"></div>
            
            <!--Second row-->
            <div class="row">
            <div class="col-1 mr-3"> <i class="fas fa-book fa-2x blue-text"></i> </div>
            <div class="col-10">
                <h5 class="feature-title">Detailed documentation</h5>
                <p class="grey-text">We give you detailed user-friendly documentation at your disposal. It will help you to implement your ideas
                easily. </p>
              </div>
          </div>
            <!--/Second row-->
            
            <div style="height:30px"></div>
            
            <!--Third row-->
            <div class="row">
            <div class="col-1 mr-3"> <i class="fas fa-graduation-cap fa-2x cyan-text"></i> </div>
            <div class="col-10">
                <h5 class="feature-title">Lots of tutorials</h5>
                <p class="grey-text">We care about the development of our users. We have prepared numerous tutorials, which allow you to learn
                how to use MDB as well as other technologies.</p>
              </div>
          </div>
            <!--/Third row--> 
            
          </div>
        <!--/Grid column--> 
        
        <!--Grid column-->
        <div class="col-lg-6 col-md-12">
            <p class="h5 text-center mb-4">Watch our "5 min Quick Start" tutorial</p>
            <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/cXTThxoywNQ" allowfullscreen></iframe>
          </div>
          </div>
        <!--/Grid column--> 
        
      </div>
        <!--/Grid row--> 
        
      </section>
    <!--Section: Main features & Quick Start-->
    
    <hr class="my-5">
    
    <!--Section: Not enough-->
    <section>
        <h2 class="my-5 h3 text-center">Not enough?</h2>
        
        <!--First row-->
        <div class="row features-small mb-5 mt-3 wow fadeIn"> 
        
        <!--First column-->
        <div class="col-md-4"> 
            <!--First row-->
            <div class="row">
            <div class="col-2"> <i class="fas fa-check-circle fa-2x indigo-text"></i> </div>
            <div class="col-10">
                <h6 class="feature-title">Free for personal and commercial use</h6>
                <p class="grey-text">Our license is user-friendly. Feel free to use MDB for both private as well as commercial projects. </p>
                <div style="height:15px"></div>
              </div>
          </div>
            <!--/First row--> 
            
            <!--Second row-->
            <div class="row">
            <div class="col-2"> <i class="fas fa-check-circle fa-2x indigo-text"></i> </div>
            <div class="col-10">
                <h6 class="feature-title">400+ UI elements</h6>
                <p class="grey-text">An impressive collection of flexible components allows you to develop any project. </p>
                <div style="height:15px"></div>
              </div>
          </div>
            <!--/Second row--> 
            
            <!--Third row-->
            <div class="row">
            <div class="col-2"> <i class="fas fa-check-circle fa-2x indigo-text"></i> </div>
            <div class="col-10">
                <h6 class="feature-title">600+ icons</h6>
                <p class="grey-text">Hundreds of useful, scalable, vector icons at your disposal.</p>
                <div style="height:15px"></div>
              </div>
          </div>
            <!--/Third row--> 
            
            <!--Fourth row-->
            <div class="row">
            <div class="col-2"> <i class="fas fa-check-circle fa-2x indigo-text"></i> </div>
            <div class="col-10">
                <h6 class="feature-title">Fully responsive</h6>
                <p class="grey-text">It doesn't matter whether your project will be displayed on desktop, laptop, tablet or mobile phone. MDB
                looks great on each screen.</p>
                <div style="height:15px"></div>
              </div>
          </div>
            <!--/Fourth row--> 
          </div>
        <!--/First column--> 
        
        <!--Second column-->
        <div class="col-md-4 flex-center"> <img src="https://mdbootstrap.com/img/Others/screens.png" alt="MDB Magazine Template displayed on iPhone" class="z-depth-0 img-fluid"> </div>
        <!--/Second column--> 
        
        <!--Third column-->
        <div class="col-md-4 mt-2"> 
            <!--First row-->
            <div class="row">
            <div class="col-2"> <i class="fas fa-check-circle fa-2x indigo-text"></i> </div>
            <div class="col-10">
                <h6 class="feature-title">70+ CSS animations</h6>
                <p class="grey-text">Neat and easy to use animations, which will increase the interactivity of your project and delight your visitors. </p>
                <div style="height:15px"></div>
              </div>
          </div>
            <!--/First row--> 
            
            <!--Second row-->
            <div class="row">
            <div class="col-2"> <i class="fas fa-check-circle fa-2x indigo-text"></i> </div>
            <div class="col-10">
                <h6 class="feature-title">Plenty of useful templates</h6>
                <p class="grey-text">Need inspiration? Use one of our predefined templates for free.</p>
                <div style="height:15px"></div>
              </div>
          </div>
            <!--/Second row--> 
            
            <!--Third row-->
            <div class="row">
            <div class="col-2"> <i class="fas fa-check-circle fa-2x indigo-text"></i> </div>
            <div class="col-10">
                <h6 class="feature-title">Easy installation</h6>
                <p class="grey-text">5 minutes, a few clicks and... done. You will be surprised at how easy it is. </p>
                <div style="height:15px"></div>
              </div>
          </div>
            <!--/Third row--> 
            
            <!--Fourth row-->
            <div class="row">
            <div class="col-2"> <i class="fas fa-check-circle fa-2x indigo-text"></i> </div>
            <div class="col-10">
                <h6 class="feature-title">Easy to use and customize</h6>
                <p class="grey-text">Using MDB is straightforward and pleasant. Components flexibility allows you deep customization. You will
                easily adjust each component to suit your needs.</p>
                <div style="height:15px"></div>
              </div>
          </div>
            <!--/Fourth row--> 
          </div>
        <!--/Third column--> 
        
      </div>
        <!--/First row--> 
        
      </section>
    <!--Section: Not enough-->
    
    <hr class="mb-5">
    
    <!--Section: More-->
    <section>
        <h2 class="my-5 h3 text-center">...and even more</h2>
        
        <!--First row-->
        <div class="row features-small mt-5 wow fadeIn"> 
        
        <!--Grid column-->
        <div class="col-xl-3 col-lg-6"> 
            <!--Grid row-->
            <div class="row">
            <div class="col-2"> <i class="fab fa-firefox fa-2x mb-1 indigo-text" aria-hidden="true"></i> </div>
            <div class="col-10 mb-2 pl-3">
                <h5 class="feature-title font-bold mb-1">Cross-browser compatibility</h5>
                <p class="grey-text mt-2">Chrome, Firefox, IE, Safari, Opera, Microsoft Edge - MDB loves all browsers; all browsers love MDB. </p>
              </div>
          </div>
            <!--/Grid row--> 
          </div>
        <!--/Grid column--> 
        
        <!--Grid column-->
        <div class="col-xl-3 col-lg-6"> 
            <!--Grid row-->
            <div class="row">
            <div class="col-2"> <i class="fas fa-level-up-alt fa-2x mb-1 indigo-text" aria-hidden="true"></i> </div>
            <div class="col-10 mb-2">
                <h5 class="feature-title font-bold mb-1">Frequent updates</h5>
                <p class="grey-text mt-2">MDB becomes better every month. We love the project and enhance as much as possible. </p>
              </div>
          </div>
            <!--/Grid row--> 
          </div>
        <!--/Grid column--> 
        
        <!--Grid column-->
        <div class="col-xl-3 col-lg-6"> 
            <!--Grid row-->
            <div class="row">
            <div class="col-2"> <i class="fas fa-comments fa-2x mb-1 indigo-text" aria-hidden="true"></i> </div>
            <div class="col-10 mb-2">
                <h5 class="feature-title font-bold mb-1">Active community</h5>
                <p class="grey-text mt-2">Our society grows day by day. Visit our forum and check how it is to be a part of our family. </p>
              </div>
          </div>
            <!--/Grid row--> 
          </div>
        <!--/Grid column--> 
        
        <!--Grid column-->
        <div class="col-xl-3 col-lg-6"> 
            <!--Grid row-->
            <div class="row">
            <div class="col-2"> <i class="fas fa-code fa-2x mb-1 indigo-text" aria-hidden="true"></i> </div>
            <div class="col-10 mb-2">
                <h5 class="feature-title font-bold mb-1">jQuery 3.x</h5>
                <p class="grey-text mt-2">MDB is integrated with newest jQuery. Therefore you can use all the latest features which come along with
                it. </p>
              </div>
          </div>
            <!--/Grid row--> 
          </div>
        <!--/Grid column--> 
        
      </div>
        <!--/First row--> 
        
        <!--Second row-->
        <div class="row features-small mt-4 wow fadeIn"> 
        
        <!--Grid column-->
        <div class="col-xl-3 col-lg-6"> 
            <!--Grid row-->
            <div class="row">
            <div class="col-2"> <i class="fas fa-cubes fa-2x mb-1 indigo-text" aria-hidden="true"></i> </div>
            <div class="col-10 mb-2">
                <h5 class="feature-title font-bold mb-1">Modularity</h5>
                <p class="grey-text mt-2">Material Design for Bootstrap comes with both, compiled, ready to use libraries including all features as
                well as modules for CSS (SASS files) and JS.</p>
              </div>
          </div>
            <!--/Grid row--> 
          </div>
        <!--/Grid column--> 
        
        <!--Grid column-->
        <div class="col-xl-3 col-lg-6"> 
            <!--Grid row-->
            <div class="row">
            <div class="col-2"> <i class="fas fa-question fa-2x mb-1 indigo-text" aria-hidden="true"></i> </div>
            <div class="col-10 mb-2">
                <h5 class="feature-title font-bold mb-1">Technical support</h5>
                <p class="grey-text mt-2">We care about reliability. If you have any questions - do not hesitate to contact us. </p>
              </div>
          </div>
            <!--/Grid row--> 
          </div>
        <!--/Grid column--> 
        
        <!--Grid column-->
        <div class="col-xl-3 col-lg-6"> 
            <!--Grid row-->
            <div class="row">
            <div class="col-2"> <i class="fas fa-th fa-2x mb-1 indigo-text" aria-hidden="true"></i> </div>
            <div class="col-10 mb-2">
                <h5 class="feature-title font-bold mb-1">Flexbox</h5>
                <p class="grey-text mt-2">MDB fully supports Flex Box. You can forget about alignment issues.</p>
              </div>
          </div>
            <!--/Grid row--> 
          </div>
        <!--/Grid column--> 
        
        <!--Grid column-->
        <div class="col-xl-3 col-lg-6"> 
            <!--Grid row-->
            <div class="row">
            <div class="col-2"> <i class="far fa-file-code fa-2x mb-1 indigo-text" aria-hidden="true"></i> </div>
            <div class="col-10 mb-2">
                <h5 class="feature-title font-bold mb-1">SASS files</h5>
                <p class="grey-text mt-2">Arranged and well documented .scss files can't wait until you compile them.</p>
              </div>
          </div>
            <!--/Grid row--> 
          </div>
        <!--/Grid column--> 
        
      </div>
        <!--/Second row--> 
        
      </section>
    <!--Section: More--> 
    
  </div>
  </main>
<!--Main layout--> 

<!--Footer-->
<footer class="page-footer text-center font-small mt-4 wow fadeIn"> 
    
    <!--Call to action-->
    <div class="pt-4"> <a class="btn btn-outline-white" href="#getting-started/download/"  role="button">Download MDB <i class="fas fa-download ml-2"></i> </a> <a class="btn btn-outline-white" href="#"  role="button">Start free tutorial <i class="fas fa-graduation-cap ml-2"></i> </a> </div>
    <!--/.Call to action-->
    
    <hr class="my-4">
    
    <!--Copyright-->
    <div class="footer-copyright py-3">Copyright &copy; 2019.Company name All rights reserved.</div>
    <!--/.Copyright--> 
    
  </footer>
<!--/.Footer--> 

<!-- SCRIPTS --> 
<!-- JQuery --> 
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> 
<!-- Bootstrap tooltips --> 
<script type="text/javascript" src="js/popper.min.js"></script> 
<!-- Bootstrap core JavaScript --> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<!-- MDB core JavaScript --> 
<script type="text/javascript" src="js/mdb.min.js"></script> 
<!-- Initializations --> 
<script type="text/javascript">
    // Animations initialization
    new WOW().init();
  </script>
</body>
</html>
